import React, {Component} from "react";
import PropTypes from "prop-types";
export default class Footer extends Component{
    static propTypes={
        mainList:PropTypes.array.isRequired,
        handleDelete:PropTypes.func.isRequired,
        handleUpdate:PropTypes.func.isRequired
    }
    //筛选出已完成的任务
    removeAllDone=()=>{
        let ids=this.props.mainList.filter(item=>item.done).map(item=>item.id)
        this.props.handleDelete(ids)
    }
    //更新全部done状态
    handleUpdate=(e)=>{
        let ids=this.props.mainList.map(item=>item.id)
        this.props.handleUpdate(ids,e.target.checked)
    }
    render(){
        const {mainList}=this.props
        let checkedAll=mainList.reduce((pre,cur,index,arr)=>{
            // console.log(index.js,arr)
            return cur.done?pre+=1:pre+=0
        },0)
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" checked={checkedAll===mainList.length&&checkedAll!==0?true:false} onChange={(e)=>this.handleUpdate(e)}/>
                </label>
                <span><span>已完成{checkedAll}</span> / 全部{mainList.length}</span>
                <button className="btn btn-danger" onClick={this.removeAllDone}>清除已完成任务</button>
            </div>
        )
    }

}
